<template>
	<view class="theme">
		<view class="content">
			<!-- 轮播图 -->
			<view class="banner">
				<swiper class="carousel" autoplay="true" interval="4000">
					<swiper-item><image src="https://img.hn96606.com/images/newYZX/banner.png"></image></swiper-item>
					<swiper-item><image src="https://img.hn96606.com/images/newYZX/banner2.png"></image></swiper-item>
				</swiper>
			</view>
			<!-- 选择车次 -->
			<view class="fare">
				<view class="staring_f1">
					<view class="staring"><image src="../../static/img/index/starting.png" mode=""></image></view>
					<view class="depart" @click="goDepart">{{ departStationName }}</view>
				</view>
				<view class="staring_f2">
					<view class="staring"><image src="../../static/img/index/arrive.png" mode=""></image></view>
					<view class="depart" @click="goDestination">{{ endStationName }}</view>
				</view>
				<!-- 选择时间 -->
				<view class="time">
					<view class=" calendar"><image src="../../static/img/index/calendar.png" mode=""></image></view>
					<view class="timeQuantum" @click="goCalendar">{{ fulldate }} {{ ncWeek }} {{ today }}</view>
				</view>
				<!-- 搜索汽车票按钮 -->
				<button class="btn" type="default" @tap="click">搜索汽车票</button>
				<button v-if="!showBtn" class="tokenBtn" open-type="getUserInfo" @getuserinfo="appLogin">微信授权登录</button>
				<!-- 搜索记录 -->
				<view class="history">
					<view class="record" v-for="(item, index) in record" :key="index" @click="history(item.station, item.target, item.gloglobalcode)">
						<view class="">{{ item.station }}</view>
						<view class="transverse" v-show="ishidden">-</view>
						<view class="">{{ item.target }}</view>
					</view>
					<view class="clear" @click="clear" v-show="ishidden">清除历史记录</view>
				</view>
			</view>
			<!-- 定制客运 -->
			<view class="passenger">
				<view class="title">定制客运</view>
				<view class="customiZation">
					<view class="cust"><image src="/static/img/index/fast_ride.png" mode=""></image></view>
					<view class="cust"><image src="/static/img/index/sharing.png" mode=""></image></view>
					<view class="cust"><image src="/static/img/index/chartered.png" mode=""></image></view>
				</view>
			</view>
			<!-- 底部banner -->
			<view class="bottom"><image src="https://img.hn96606.com/images/newYZX/banner.png" mode=""></image></view>
		</view>
		<!-- 活动弹框 -->
		<view class="activityBox" v-if="activity">
			<view class="activity"><image src="../../static/img/index/activity.png" mode=""></image></view>
			<view class="close" @click="close"><image src="/static/img/index/close.png" mode=""></image></view>
		</view>
	</view>
</template>

<script>
import utils from '@/static/common/utils.js';
import newToken from '@/static/http/pageConfig.js';
import value from '@/static/value/value.js';
export default {
	data() {
		return {
			index: 0,
			today: '',
			record: [],
			ncWeek: '',
			citName: '',
			fulldate: '',
			stationName: '',
			targetName: '',
			gloglobalcode: '',
			endStationName: '请选择目的地',
			departStationName: '请选择出发车站',
			showBtn: uni.getStorageSync('token'),
			ishidden: false,
			querys: {},
			activity: false
		};
	},
	onShow() {
		const that = this;
		this.getJSON();
		try {
			// 获取用户token
			this.appLogin();
			uni.getStorage({
				key: 'departStation',
				success: function(res) {
					that.gloglobalcode = res.data.departStationCode;
					that.departStationName = res.data.departStationName;
				},
				fail: function(err) {
					console.log(err);
				}
			});
			uni.getStorage({
				key: 'endStation',
				success: function(res) {
					that.endStationName = res.data.endStationName;
				},
				fail: function(err) {
					console.log(err);
				}
			});
			uni.getStorage({
				key: 'fulldate',
				success: function(res) {
					that.fulldate = res.data.fulldate;
					that.ncWeek = res.data.ncWeek;
					that.today = res.data.today;
				}
			});
		} catch (err) {
			console.log(err);
		}
	},
	onLoad(query) {
		// 活动开关
		this.movablSwitch();

		this.querys = {
			query: query,
			path: 'pages/index/index',
			scene: uni.getLaunchOptionsSync().scene
		};
		// 判断是否是扫码进入
		if (this.querys.scene == 1011) {
			var url = decodeURIComponent(query.q);
			var arr = url.split('?');
			if (arr[1].split('&')[0] == 'type=qcp') {
				var code = arr[1].split('&')[1].split('=');
				var target = arr[1].split('&')[2].split('=');
				var data = {
					departStationName: this.departStationName,
					departStationCode: code[1]
				};
				uni.setStorage({
					key: 'departStation',
					data: data
				});
				var obj = {
					endStationName: target[1]
				};
				uni.setStorage({
					key: 'endStation',
					data: obj
				});
				uni.navigateTo({
					url: '../busInfo/busInfo'
				});
			}
		}
		// 获取当天为默认日期
		var dates = new Date();
		var year = dates.getFullYear();
		var month = dates.getMonth() + 1;
		var day = dates.getDate();
		if (month < 10) {
			month = '0' + month;
		}
		if (day < 10) {
			day = '0' + day;
		}
		var nowDate = year + '-' + month + '-' + day;
		this.fulldate = nowDate;
		const firstTime = {
			time: nowDate
		};
		uni.setStorage({
			data: firstTime,
			key: 'First',
			success: res => {}
		});

		// 默认显示为今天
		if ((this.fulldate = nowDate)) {
			this.today = '今天';
		}
		// 把日期转换成周几
		var dateArray = nowDate.split('-');
		var date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
		var week = utils.utils.GetWeek(date);
		this.ncWeek = week; // 赋值本地数据
		const calendar = {
			fulldate: nowDate,
			ncWeek: this.ncWeek,
			today: this.today
		};
		uni.setStorage({
			key: 'fulldate',
			data: calendar
		});
	},
	computed: {},
	methods: {
		getJSON() {
			this.$http
				.request({
					url: 'https://img.hn96606.com/images/networkData.json'
				})
				.then(res => {
					value.value.JSONData = res.data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		face() {
			var data = {
				app_id: 2140688359,
				time_stamp: utils.utils.GetTicks(),
				// 请求
				nonce_str: 'fa577ce340859f9fe',
				// 待对比人脸图片A 、 base64  =========== 需要先调用身份证接口，获取身份证照片
				image_a: '',
				// 待对比人脸图片B 、 base64
				image_b: ''
			};
			this.$http.request({
				url: 'https://api.ai.qq.com/fcgi-bin/face/face_facecompare',
				method: 'POST',
				data: data
			});
		},
		// 请求token
		GetUserToken(code, iv, encryptedData) {
			const that = this;
			var data = {
				code: code,
				iv: iv,
				encryptedData: encryptedData,
				options: JSON.stringify(that.querys),
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			data.sign = utils.utils.GetSign(data);
			// 获取用户信息
			this.$http
				.request({
					url: `/Login/Oauth`,
					method: 'post',
					data: data
				})
				.then(res => {
					newToken.obj.token = res.data.token;
					that.showBtn = res.data.token;
					uni.setStorageSync('token', res.data.token);
				})
				.catch(err => {
					console.log(err);
				});
		},
		appLogin: function() {
			const that = this;
			uni.getProvider({
				service: 'oauth',
				success: function(res) {
					//支持微信、qq和微博等
					if (~res.provider.indexOf('weixin')) {
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								// 获取用户信息
								uni.getUserInfo({
									provider: 'weixin',
									success: function(infoRes) {
										uni.setStorage({
											data: infoRes.userInfo,
											key: 'userInfo'
										});
										that.GetUserToken(loginRes.code, infoRes.iv, infoRes.encryptedData);
									},
									fail: function(err) {
										console.log(err);
									}
								});
							}
						});
					}
				}
			});
		},
		// 历史班次
		history(target, station, gloglobalcode) {
			this.departStationName = target;
			this.endStationName = station;
			var obj = {
				endStationName: this.endStationName
			};
			uni.setStorage({
				data: obj,
				key: 'endStation',
				success() {
					uni.navigateBack({});
				}
			});
			var date = {
				departStationCode: this.gloglobalcode,
				departStationName: this.departStationName
			};
			uni.setStorage({
				data: date,
				key: 'departStation',
				success() {
					uni.navigateBack({});
				}
			});
		},
		// 清除搜索历史
		clear() {
			this.record = [];
			this.ishidden = false;
		},
		click() {
			const that = this;
			uni.requestSubscribeMessage({
				tmplIds: ['PMxaGOTAQnG_pMmK4ZZG9J1aTKXX0lW1eQp8yf1lCwc'],
				// success(res){
				// }
				complete() {
					that.busInfo();
				}
			});
		},
		// 班次信息
		busInfo() {
			if (this.departStationName == '请选择出发车站') {
				uni.showModal({
					showCancel: false,
					content: '请选择出发车站',
					duration: 1500
				});
				return false;
			} else if (this.endStationName == '请选择目的地') {
				uni.showModal({
					showCancel: false,
					content: '请选择目的地',
					duration: 1500
				});
				return false;
			} else {
				uni.navigateTo({
					url: '/pages/busInfo/busInfo?time=' + this.fulldate
				});
				clearTimeout(time);
			}
			// 获取历史信息
			var arr = {
				station: this.departStationName,
				target: this.endStationName,
				gloglobalcode: this.gloglobalcode
			};
			this.record.push(arr);
			let obj = {};
			let open = this.record.reduce((cur, next) => {
				obj[next.target] ? '' : (obj[next.target] = true && cur.push(next));
				return cur;
			}, []);
			this.record = open.slice(-2);
			if (this.record != []) {
				this.ishidden = true;
			}
			var time = setTimeout(() => {}, 500);
		},
		// 跳转到选择出发车站
		goDepart(e) {
			uni.navigateTo({
				url: '/pages/depart/depart'
			});
		},
		// 跳转到目的地
		goDestination(e) {
			uni.navigateTo({
				url: '/pages/destination/destination'
			});
		},
		// 日历
		goCalendar(e) {
			uni.navigateTo({
				url: '/pages/calendar/calendar'
			});
		},
		// 活动开关
		movablSwitch() {
			var data = {
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			data.sign = utils.utils.GetSign(data);
			this.$http
				.request({
					url: '/Config/GetConfig',
					method: 'GET',
					data: data
				})
				.then(res => {
					if (res.data.isActivityOn == true) {
						this.activity = true;
					}
				});
		},
		// 关闭活动
		close() {
			this.activity = false;
		}
	}
};
</script>

<style scoped>
.theme {
	width: 100%;
	height: 100%;
	background: linear-gradient(#00a0e9, #ffffff);
}
.tokenBtn {
	position: relative;
	top: -82upx;
	opacity: 0;
}

.content {
	width: 95%;
	margin: auto;
}
/* 头部轮播图 */
.carousel {
	height: 179upx;
	padding-top: 9upx;
}

.carousel image {
	width: 100%;
	height: 100%;
}
/* 选择车站 */
.fare {
	margin-top: 30upx;
	border-radius: 20px;
	padding-bottom: 50upx;
	background-color: #ffffff;
}

.staring_f1 {
	display: flex;
	justify-content: flex-start;
}

.staring_f2 {
	display: flex;
	justify-content: flex-start;
}

.staring {
	padding-top: 32upx;
	padding-left: 30upx;
}

.staring image {
	width: 40upx;
	height: 40upx;
}
.depart {
	width: 80%;
	height: 100upx;
	font-size: 38upx;
	font-weight: 600;
	margin-left: 30upx;
	line-height: 100upx;
	font-family: PingFang SC;
	border-bottom: 1upx solid #eaeaea;
}
.switchover {
	margin-top: 60upx;
	margin-left: 56upx;
}
.switchover image {
	width: 66upx;
	height: 67upx;
}
.time {
	display: flex;
}
.timeQuantum {
	width: 80%;
	height: 100upx;
	font-size: 38upx;
	font-weight: 600;
	margin-left: 30upx;
	line-height: 115upx;
	border-bottom: 1px solid #eaeaea;
}
.uni-list-cell-db.data-v-6878ba05 {
	border: none;
}
.calendar {
	margin-left: 31upx;
	margin-top: 39upx;
}

.calendar image {
	width: 38upx;
	height: 38upx;
}

.uni-list {
	margin-left: 40upx;
	width: 100%;
}

.uni-list-cell-db {
	height: 100upx;
	line-height: 50px;
	border-bottom: 1upx solid #e6e6e6;
}
/* 搜索按钮 */
.btn {
	width: 650upx;
	height: 88upx;
	color: #ffffff;
	font-size: 35upx;
	margin-top: 29upx;
	border-radius: 30px;
	background-image: linear-gradient(to left, #00a0ff, #87cefa);
}
.btn::after {
	border: none !important;
}
/* 历史记录 */
.history {
	display: flex;
}
.record {
	display: flex;
	color: #999999;
	font-size: 22upx;
	margin-top: 31upx;
	margin-left: 33upx;
}
.transverse {
	margin: 0 5upx;
}
.clear {
	color: #01a1e9;
	font-size: 28upx;
	margin: 27upx 0 0 15upx;
}
/* 定制客运 */
.passenger {
	margin-top: 29upx;
}
.customiZation {
	display: flex;
	margin-top: 20upx;
	justify-content: space-around;
}
.cust image {
	width: 220upx;
	height: 140upx;
}
.title {
	font-size: 30upx;
	font-weight: 800;
	margin-left: 10upx;
	color: rgba(51, 51, 51, 1);
	font-family: PingFang SC;
}
.bottom image {
	width: 710upx;
	height: 177upx;
	margin-top: 29upx;
}
.activityBox {
	top: 88upx;
	position: fixed;
	width: 100%;
}
.activityBox image {
	width: 100%;
	height: 100%;
}
.activity {
	width: 85%;
	margin: auto;
	height: 800upx;
}
.close {
	margin: auto;
	width: 70upx;
	height: 70upx;
	padding-top: 20upx;
}
</style>
